<template>
  <!-- 通知公告的详情 富文本回显组件 -->
  <div class="page-box bgf radius ql-editor " id="ql-editor" style="height:auto !important" v-html="noticeContent">
   
  </div>
</template>

<script>
export default {
  name: "",
  props:['noticeContent'],
  data() {
    return {
      list:[]
    };
  },
  created() {
  },
  mounted(){
  },
  methods: {
    // 获取所有img 并使之可以预览
    getAllImg(){
      setTimeout(()=>{
        let imgs = this.$el.querySelectorAll('img')
        this.list = []
        if(imgs&&imgs.length){
          for(let i=0;i<imgs.length;i++){
            this.list.push(imgs[i].currentSrc)
            imgs[i].onclick = ()=>{
             return this.viewImgs(i)
            }
          }
        }
      },1000)
    },
    viewImgs(index){
      this.$viewerApi({
        images: this.list,
        options: {
          initialViewIndex: index
        }
      });
    }
  },
};
</script>

<style scoped lang="scss">
.page-box ::v-deep img {
  max-width: 1200px;
  width: 100%;
  cursor: pointer;
}
</style>
